<template>
	<div>
		<div style="background: #F6F6F6;margin-bottom: 10px;border-radius: 4px;;">
			<el-row :gutter="20">
				<el-col :span="10">
					<div style="background: #fff;border-radius: 4px;padding-bottom: 14px;">
						<div style="padding: 10px 10px 0;">
							<el-date-picker type="year" v-model="year" @change="getData" :clearable="false" format="yyyy"
								value-format="yyyy"></el-date-picker>
						</div>
						<div style="padding:0 10px;" class="displayFlexBet mt10">
							<div
								style="background: #2B04C3;text-align: center;padding: 20px 30px;color: #fff;border-radius: 16px;flex: 1;">

								<div style="font-size: 16px;font-weight: bold;">{{dataList2.noiseBaseNum}}</div>
								<div style="font-size: 12px;margin-top: 5px;color: #37BEF0;">总监测点位</div>
							</div>
						</div>
					</div>
				</el-col>
				<el-col :span="14">
					<div class="displayFlexBet">
						<div class="u-border pad20 u-borderRadius8 text-center mr10 bgfff" style="flex: 1;">
							<el-progress type="circle" :percentage="dataList2.completePercent" color="#3A3EF4" :width="80"
								:stroke-width="8"></el-progress>
							<div style="margin-top: 10px;color: #888888;" class="font14">监测完成率</div>
						</div>

						<div class="u-border pad20 u-borderRadius8 text-center mr10 bgfff" style="flex: 1;">
							<el-progress type="circle" :percentage="dataList2.qualifyPercent" color="#3A3EF4" :width="80"
								:stroke-width="8"></el-progress>
							<div style="margin-top: 10px;color: #888888;" class="font14">监测达标率</div>
						</div>

					</div>

				</el-col>
			</el-row>
		</div>

		<div class="displayFlexBet bgfff pad15 mb10 color555" style="border-radius: 8px;">
			<div style="flex: 1;">监测点位</div>
			<div style="flex: 1;">监测方式</div>
			<div style="flex: 1; ">监测频次</div>
			<!-- <div style="flex: 2; ">药剂及原辅材料</div> -->
			<div style="flex: 1; ">计划监测</div>
			<div style="flex: 1; ">完成监测</div>
			<div style="flex: 1; ">逾期监测</div>
			<div style="flex: 2; ">最近监测</div>
			<div style="flex: 1;">操作</div>
		</div>

		<div style="border-radius: 8px;" class="color555 bgfff">
			<div class="displayFlexBet pad10 color555 point" v-for="(item,index) in gasOutletList" :key="index"
				style="border-bottom:1px solid#F8F7F9">
				<div style="flex:1">{{item.areaName}}</div>
				<div style="flex:1" class="">{{item.monitorTypeStr}}</div>
				<div style="flex:1" class="">{{item.frequencyStr}}</div>
				<div style="flex:1" class="">{{item.totalNum}}</div>
				<div style="flex:1" class="">{{item.completeNum}}</div>
				<div style="flex:1" class="">{{item.overTimeNum}}</div>
				<div style="flex:2" class="">{{item.latestCompleteTime}}</div>

				<div style="flex: 1;display: flex;align-items: center;">
					<div style="background: #DCEBFC;padding: 4px 10px;color:#426AB3;margin-left: 15px;border-radius: 20px;"
						class="font12 point" @click.stop="gotoDetail(item)">监测台账</div>

				</div>

			</div>
			<el-empty v-if="gasOutletList.length == 0" />
		</div>

	</div>
</template>

<script>
	import * as echarts from 'echarts';
	import moment from 'moment'
	import HomeMock from "@/assets/mock/HomeMock.json"

	let that
	export default {
		components: {},
		data() {
			return {
				activeName: "first",
				year: moment().format('YYYY'),
				ticketId: this.$store.state.token,
				data2: {},
				data3: {},
				dataList1: {},
				dataList2: {},
				dataList3: {},
				dataList4: [],
				gasMonitorPollutionList: [],
				gasPollution: {},
				waterMonitorPollutionList: [],
				waterPollution: {},
				productList: [],
				productId: '',
				materialMonthQtyList: [],
				gasOutletList: [],
				mock2: false,
			}
		},
		created: function() {},
		mounted: function() {
			that = this;
			that.getData()
		},

		methods: {

			getData() {
				that.getExecuteList()
				that.getHomepageGasOutletList()
			},

			gotoDetail(item) {
				that.$router.push("/noise/noiseSurveyDetail?id=" + item.surveyId)
			},

			getHomepageGasOutletList(value) {
				let params = {
					year: that.year
				}
				that.ajax({
					url: 'noise/survey/page?ticketId=' + that.$store.state.token + '&pageNum=1&pageSize=99999999',
					contentType: 'application/json',
					data: JSON.stringify(params),
					success: function(result) {
						if (result.data) {
							that.gasOutletList = result.data.records
						}
					},
				})
			},

			getExecuteList() {
				that.ajax({
					url: '/noise/survey/countNoise',
					data: JSON.stringify({
						year: that.year
					}),
					contentType: 'application/json',
					success: function(result) {
						that.mock2 = false
						if (result.status == -5) {
							result.data = HomeMock.feiqi
							that.mock2 = true
						}
						if (result.data) {
							that.dataList2 = result.data
						}
					},
				}, false)
			},

		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.selected {
		color: #3A3EF4;
		font-weight: bold;
	}

	.text_overflow {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		word-break: break-all;
	}

	.gasListItem2 {
		background: #9BCEA5;
		text-align: center;
		color: #fff;
		padding: 20px;
		margin: 10px 0;
		color: #000;
		border-radius: 16px;
		position: relative;
		flex: 1;
	}

	.gaslistItem3 {
		background: #FFC895;
		text-align: center;
		color: #fff;
		padding: 20px;
		margin: 10px 0;
		color: #000;
		border-radius: 16px;
		position: relative;
		flex: 1;
	}

	.listBg4 {
		background-image: url("../../assets/sIcon55.png");
		background-size: 100% 100%;
	}

	>>>.el-progress__text {
		font-size: 18px !important;
		color: #000 !important;
	}
</style>